<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button>添加</button>
    <ul> 

    </ul>
    <script>
        //获取所需元素
        let button = document.querySelector('button')
        let ul  = document.querySelector('ul')
        let input  = document.querySelector('input')

        // 调用者   事件方式
        button.onclick = function () {
            // 逻辑
            // 1.获取input输入的内容
            let val = input.value
            console.log(val);
            if (!val.trim())return   
            // 创建元素
            let li = document.createElement('li')
            // 写入输入框的内容
            li.innerHTML=val
            // 将li插入到ul中
            ul.appendChild(li)
            
            // if (val.trim()) {
            //  // 创建元素
            // let li = document.createElement('li')
            // // 写入输入框的内容
            // li.innerHTML=val
            // // 将li插入到ul中
            // ul.appendChild(li)
            // }
        }
    </script>
</body>
</html>